<template>
    <div>
        <div class="add_title"><b>添加账号</b></div>
        <div class="acc_container">
            <el-form :model="formInline" class="demo-form-inline">
                <el-form-item label="名称">
                    <el-input v-model="formInline.name" placeholder="请输入账号" clearable />
                </el-form-item>
                <el-form-item label="账号">
                    <el-input v-model="formInline.acc" placeholder="请输入账号" clearable />
                </el-form-item>
                <el-form-item label="密码">
                    <el-input v-model="formInline.pwd" type="password" placeholder="请输入密码" show-password />
                </el-form-item>
                <el-form-item label="用户组">
                    <el-select v-model="formInline.region" placeholder="请选择用户组" clearable>
                        <el-option label="管理员" value="1" />
                        <el-option label="普通员工" value="2" />
                    </el-select>
                </el-form-item>

                <el-form-item>
                    <el-button type="warning" @click="clickReset">重置</el-button>
                    <el-button type="primary" @click="onSubmit">确认</el-button>
                </el-form-item>
            </el-form>
        </div>

    </div>
</template>

<script setup>
import { ref } from 'vue'
import { $_addStaff } from '@/apis/shop';
import { UseuserInfo } from "@/store/user.js";
let { userInfo } = UseuserInfo()
let shopid = userInfo.sid
const formInline = ref({
    acc: '',
    region: '',
    pwd: '',
    name: '',
    sid: shopid
})
const onSubmit = () => {
    if (!formInline.value.name) return ElMessage.error('名称不能为空')
    if (!formInline.value.acc) return ElMessage.error('账号不能为空')
    if (!formInline.value.pwd) return ElMessage.error('密码不能为空')
    if (!/^\S{6,14}$/.test(formInline.value.pwd)) return ElMessage.error('密码长度要求6-14个字符')
    if (!formInline.value.region) return ElMessage.error('请选择用户组')
    console.log(formInline.value);

    $_addStaff(formInline.value).then(res => {
        if (res.success) {
            clickReset()
        }
    })
}

// 重置
const clickReset = () => {
    formInline.value.acc = ''
    formInline.value.region = ''
    formInline.value.pwd = ''
    formInline.value.name = ''
}


</script>

<style lang="scss" scoped>
.acc_container {
    width: 400px;
}

.add_title {
    margin-bottom: 24px;
}
</style>